﻿@model AddressModel

@{
    var breakpoint = (ViewData["breakpoint"] as string).NullEmpty() ?? "md";
}

<input asp-for="Id" type="hidden" />
<input asp-for="CreatedOnUtc" type="hidden" />
@*INFO: required by AddressValidator*@
<input asp-for="CountryName" type="hidden" />
<input asp-for="DefaultAddressesEnabled" type="hidden" />

<div class="form-horizontal address-form">
    <div sm-if="Model.CompanyEnabled" class="form-group row">
        <label id="CompanyLabel" asp-for="Company" class="col-@(breakpoint)-3 col-form-label@(Model.CompanyRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="Company" sm-required="Model.CompanyRequired" autocomplete="organization" />
            <span asp-validation-for="Company"></span>
        </div>
    </div>

    <div><hr /></div>

    <div sm-if="Model.SalutationEnabled || Model.TitleEnabled" class="form-group row">
        @if (Model.SalutationEnabled)
        {
            <label asp-for="Salutation" class="col-@(breakpoint)-3 col-form-label"></label>
            <div class="col-@(breakpoint)-3">
                <select asp-for="Salutation" asp-items="Model.AvailableSalutations" autocomplete="honorific-prefix"></select>
                <span asp-validation-for="Salutation"></span>
            </div>
        }
        @if (Model.TitleEnabled)
        {
            <label asp-for="Title" class="col-@(breakpoint)-3 col-form-label@(Model.SalutationEnabled ? " text-right" : "")"></label>
            <div class="col-@(breakpoint)-3">
                <input asp-for="Title" autocomplete="honorific-prefix" />
                <span asp-validation-for="Title"></span>
            </div>
        }
    </div>
    <div class="form-group row">
        <label id="FirstNameLabel" asp-for="FirstName" class="col-@(breakpoint)-3 col-form-label required"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="FirstName" sm-required="Model.CompanyEnabled ? null : true" autocomplete="given-name" />
            <span asp-validation-for="FirstName"></span>
        </div>
    </div>
    <div class="form-group row">
        <label id="LastNameLabel" asp-for="LastName" class="col-@(breakpoint)-3 col-form-label required"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="LastName" sm-required="Model.CompanyEnabled ? null : true" autocomplete="family-name" />
            <span asp-validation-for="LastName"></span>
        </div>
    </div>
    <div sm-if="Model.StreetAddressEnabled" class="form-group row">
        <label asp-for="Address1" class="col-@(breakpoint)-3 col-form-label@(Model.StreetAddressRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="Address1" sm-required="Model.StreetAddressRequired" autocomplete="address-line1" />
            <span asp-validation-for="Address1"></span>
        </div>
    </div>
    <div sm-if="Model.StreetAddress2Enabled" class="form-group row">
        <label asp-for="Address2" class="col-@(breakpoint)-3 col-form-label@(Model.StreetAddress2Required ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="Address2" sm-required="Model.StreetAddress2Required" autocomplete="address-line2" />
            <span asp-validation-for="Address2"></span>
        </div>
    </div>

    <div sm-if="Model.CityEnabled || Model.ZipPostalCodeEnabled" class="form-group row">
        <label asp-for="City" class="col-@(breakpoint)-3 col-form-label@(Model.CityRequired ? " required" : "")"></label>
        <div class="col-@breakpoint-9">
            <div class="row sm-gutters d-flex">
                <div class="col">
                    <input asp-for="City" sm-required="Model.CityRequired" autocomplete="address-level2" />
                </div>
                @if (Model.ZipPostalCodeEnabled)
                {
                    <div class="col col-auto">
                        <label asp-for="ZipPostalCode" class="text-right col-form-label@(Model.ZipPostalCodeRequired ? " required" : "")"></label>
                    </div>
                    <div class="col col-auto">
                        <input asp-for="ZipPostalCode" sm-required="Model.ZipPostalCodeRequired" style="width: 6rem" autocomplete="postal-code" />
                    </div>
                }
            </div>
            <span asp-validation-for="City"></span>
            <span asp-validation-for="ZipPostalCode"></span>
        </div>
    </div>

    <div sm-if="Model.CountryEnabled" class="form-group row">
        <label id="address-country-label" asp-for="CountryId" class="col-@(breakpoint)-3 col-form-label@(Model.CountryRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            @{
                var countrySelectorViewData = new
                {
                    nullable = !Model.CountryRequired,
                    placeholder = T("Address.SelectCountry").Value,
                    includeHidden = false,
                    storeId = CommonServices.StoreContext.CurrentStore.Id,
                };
            }
            <editor asp-for="CountryId"
                    class="country-input country-selector"
                    asp-additional-viewdata='countrySelectorViewData'
                    data-region-control-selector="#@Html.IdFor(x => x.StateProvinceId)"
                    data-states-ajax-url="@Url.Action("StatesByCountryId", "Common", new { area = string.Empty })"
                    data-addEmptyStateIfRequired="@Model.StateProvinceRequired"
                    aria-labelledby="address-country-label" />
            <span asp-validation-for="CountryId"></span>
        </div>
    </div>

    <div sm-if="Model.CountryEnabled && Model.StateProvinceEnabled" class="form-group row">
        <label id="address-state-province-label" asp-for="StateProvinceId" class="col-@(breakpoint)-3 col-form-label@(Model.StateProvinceRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <select asp-for="StateProvinceId"
                    asp-items="Model.AvailableStates"
                    sm-required="Model.StateProvinceRequired"
                    attr-placeholder='(!Model.StateProvinceRequired, T("Common.PleaseSelect"))'
                    aria-labelledby="address-state-province-label"
                    data-select-selected-id="@Model.StateProvinceId"></select>
            <span asp-validation-for="StateProvinceId"></span>
        </div>
    </div>

    <div><hr /></div>

    <div sm-if="Model.EmailEnabled" class="form-group row">
        <label asp-for="Email" class="col-@(breakpoint)-3 col-form-label required"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="Email" sm-required="true" autocomplete="email" />
            <span asp-validation-for="Email"></span>
        </div>
    </div>
    <div sm-if="Model.EmailEnabled && Model.ValidateEmailAddress" class="form-group row">
        <label asp-for="EmailMatch" class="col-@(breakpoint)-3 col-form-label required"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="EmailMatch" sm-required="true" autocomplete="email" />
            <span asp-validation-for="EmailMatch"></span>
        </div>
    </div>
    <div sm-if="Model.PhoneEnabled" class="form-group row">
        <label asp-for="PhoneNumber" class="col-@(breakpoint)-3 col-form-label@(Model.PhoneRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="PhoneNumber" sm-required="Model.PhoneRequired" autocomplete="tel" />
            <span asp-validation-for="PhoneNumber"></span>
        </div>
    </div>
    <div sm-if="Model.FaxEnabled" class="form-group row">
        <label asp-for="FaxNumber" class="col-@(breakpoint)-3 col-form-label@(Model.FaxRequired ? " required" : "")"></label>
        <div class="col-@(breakpoint)-9">
            <input asp-for="FaxNumber" sm-required="Model.FaxRequired" autocomplete="tel-extension" />
            <span asp-validation-for="FaxNumber"></span>
        </div>
    </div>

    <div sm-if="Model.DefaultAddressesEnabled && Model.Id != 0">
        <div class="row form-group">
            <div class="col">
                <div class="form-check">
                    <input sm-ignore-label="true" sm-switch="false" asp-for="IsDefaultBillingAddress" type="checkbox" class="form-check-input" />
                    <label class="form-check-label" for="IsDefaultBillingAddress">
                        @Html.Raw(T("Address.Fields.IsDefaultBillingAddress"))
                    </label>
                    <span asp-validation-for="IsDefaultBillingAddress"></span>
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col">
                <div class="form-check">
                    <input sm-ignore-label="true" sm-switch="false" asp-for="IsDefaultShippingAddress" type="checkbox" class="form-check-input" />
                    <label class="form-check-label" for="IsDefaultShippingAddress">
                        @Html.Raw(T("Address.Fields.IsDefaultShippingAddress"))
                    </label>
                    <span asp-validation-for="IsDefaultShippingAddress"></span>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-@breakpoint-9 text-muted address-required-hint">
            @T("Common.FormFields.Required.Hint")
        </div>
    </div>
</div>

<script sm-target-zone="scripts" data-origin="create-update-address">
    $(function () {
        // No state provinces provided -> trigger country change to load them via AJAX (see smartstore.common.js).
        $('#@Html.IdFor(x => x.CountryId)').trigger('change');

        $('#@Html.IdFor(x => x.Company)').on('change', function () {
            $('#FirstNameLabel, #LastNameLabel').toggleClass('required', $(this).val().length == 0);
        });
    });
</script>
